<template>
  <div>
    <zm-form label-width="150px" label-position="right">
      <template v-if="+infoData.type !== 4">
        <template v-if="!isHidden">
          <h4 class="pl70">成本效益</h4>
          <zm-form-item label="理论成本">
            {{ infoData.theoryCostPrice }}
            {{+infoData.type === 3?'%':'元'}}
          </zm-form-item>
          <zm-form-item label="实际成本">
            {{ infoData.practiceCostPrice || "--" }}
            {{+infoData.type === 3?'%':'元'}}
          </zm-form-item>
        </template>

        <!-- 提成配置 -->
        <div class="row-bettow wp100">
          <h4 class="pl70">提成配置</h4>
        </div>
        <!-- 配置方式 -->
         <zm-form-item label="配置方式:" v-if="+infoData.type === 3">
            {{ infoData.practiceCostPriceTypeName}}
        </zm-form-item>
        <zm-form-item>
          <zm-table-data
            :data="infoData.proportionData"
            :columns="Columns"
            :create-fetch="false"
            :table-params="tableParams"
            :show-page="false"
            class="mb"
          />
        </zm-form-item>
        <!-- 销售规则 -->
        <!-- <h4 class="pl70">销售规则</h4>
        <zm-form-item label="销售数量" v-if="isXXcard">
          {{infoData.minSaleNumberOperationSymbol==='1'?'大于':'大于等于'}}{{ infoData.saleRuleNumber }} 张
        </zm-form-item> -->
        <!-- 有效期规则 -->
        <div class="row-bettow wp100">
          <h4 class="pl70">有效期规则</h4>
        </div>
        <zm-form-item>
          <zm-table-data
            :data="infoData.expiredData"
            :columns="expiredColumns"
            :create-fetch="false"
            :table-params="tableParams"
            :show-page="false"
            class="mb"
          />
        </zm-form-item>
      </template>
      <!-- 次卡提成配置 -->
      <zm-table-data
        class="mt15"
        v-if="+infoData.type === 4"
        :data="tableParams.data"
        :columns="secondCardColumns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
        pk="id"
        :create-fetch="false"
      >
      </zm-table-data>
    </zm-form>
  </div>
</template>

<script>
import productApis from '@/api/src/product'
import tableMixin from '@/mixins/zmTableMixin'
import {
  configColumns,
  expiredColumns,
  movieColumns,
  heartColumns,
  secondCardColumns
} from './const'
export default {
  name: 'StepThree',
  components: {},
  mixins: [tableMixin],
  inject: ['$detail'],
  data () {
    return {}
  },
  computed: {
    isHidden () {
      // 销售单不可查看成本
      return this.$route.name === 'saleOrderList'
    },
    infoData () {
      return this.$detail.infoData
    },
    Columns () {
      // 点卡
      if (+this.infoData.type === 3) {
        // 心选
        if (this.infoData.practiceCostPriceType.toString() === '1') {
          return heartColumns(this)
        } else {
          // 电影
          return movieColumns(this)
        }
      } else {
        // 兑换券、卖品券
        return configColumns(this)
      }
    },
    expiredColumns () {
      // 有效期规则数据
      return expiredColumns(this)
    },
    secondCardColumns () {
      // 次卡提成方案数据
      return secondCardColumns(this)
    },
    // 类型是点卡
    isPointCard () {
      return +this.infoData.type === 3
    },
    isXXcard () {
      return this.infoData.businessType.includes('3') || this.infoData.useScope.includes('2')
    }
  },
  watch: {},
  created () {
    if (this.infoData.type === '4' && this.infoData.couponProductId) {
      this.loadList()
    }
  },
  methods: {
    async loadList () {
      const _res = await productApis.getPageList(
        this.assignQuery({ ids: this.infoData.couponProductId, dataType: '-2' })
      )

      this.initialTableData(_res.list, _res.count)
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
